<template>
  <uni-popup ref="popupRef" type="bottom" background-color="#fff" @change="handlePopupChange">
    <div class="picker-container">
      <!-- 顶部操作栏 -->
      <div class="picker-header">
        <div class="btn-cancel" @click="handleCancel">取消</div>
        <div class="picker-title">{{ title }}</div>
        <div class="btn-confirm" @click="handleConfirm">确定</div>
      </div>
      <!-- 选择器主体 -->
      <picker-view
        v-if="props.show"
        class="picker-view"
        :value="selectedIndices"
        indicator-style="height: 50px"
        @change="handlePickerChange"
      >
        <picker-view-column v-for="(column, colIndex) in columns" :key="colIndex">
          <view v-for="(item, itemIndex) in column" :key="itemIndex" class="picker-item">
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import type { UniPopup } from '@uni-helper/uni-ui-types';

// 1. 定义 Props
const props = withDefaults(defineProps<{
  show: boolean;
  columns: (string | number)[][];
  defaultIndex?: number[];
  title?: string;
  closeOnClickOverlay?: boolean;
}>(), {
  title: '请选择',
  defaultIndex: () => [],
  closeOnClickOverlay: true,
});

// 2. 定义 Emits
const emit = defineEmits<{
  (e: 'confirm', payload: { value: (string | number)[] }): void;
  (e: 'cancel'): void;
  (e: 'close'): void;
}>();

// 3. 内部状态
const popupRef = ref<UniPopup | null>(null);
const selectedIndices = ref<number[]>([]);

// 4. 监听 show 属性来控制弹窗
watch(() => props.show, (newVal) => {
  if (newVal) {
    // 当弹窗显示时，用 defaultIndex 初始化内部的选中值
    selectedIndices.value = [...props.defaultIndex];
    // 使用 nextTick 确保 popupRef 已经准备好
    nextTick(() => {
        popupRef.value?.open();
    })
  } else {
    popupRef.value?.close();
  }
});

// 5. 事件处理
/** picker-view 滚动时更新内部的索引 */
const handlePickerChange = (e: any) => {
  selectedIndices.value = e.detail.value;
};

/** uni-popup 状态变化时触发，用于处理遮罩层点击等关闭情况 */
const handlePopupChange = (e: { show: boolean }) => {
  if (!e.show) {
    // 任何原因导致的弹窗关闭，都触发 close 事件
    emit('close');
  }
};

/** 点击取消按钮 */
const handleCancel = () => {
  emit('cancel');
};

/** 点击确定按钮 */
const handleConfirm = () => {
  // 根据当前的 selectedIndices 从 columns 中找出对应的文本值
  const selectedValues = selectedIndices.value.map((selectedIndex, colIndex) => {
    return props.columns[colIndex][selectedIndex];
  });
  
  emit('confirm', { value: selectedValues });
};

</script>

<style scoped lang="scss">
.picker-container {
  width: 100vw;
  // 适配底部安全区域
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;

  .picker-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }

  .btn-cancel,
  .btn-confirm {
    padding: 8px 12px;
    font-size: 14px;
    color: #8d8d8d;
  }

  .btn-confirm {
    color: #ff7499; // 使用目标代码中的主题色
  }
}

.picker-view {
  width: 100%;
  height: 200px; // 你可以根据需要调整高度

  .picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
}
</style>